<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
     
    </style>
  </head>
  <body>
    <!-- 准备一个具有宽高的盒子 -->
    <div style="width: 600px; height: 400px"></div>
    <!-- 引入echarts -->
    <script src="./lib/echarts.min.js"></script>
    <script>
      //  1.初始化 echart.init()
      //  let 变量 = echart.init(盒子)
      let chart = echarts.init(document.querySelector('div'))

      // 2.配置echart图表 (配置项决定了图表的样子)
      //  let option = { }

      let option = {
      // 标题配置
        title: {
          text: '我的第一个图表',  // 主标题文档
          left: 'center',   // 主标题的位置
          textStyle: { 
            fontSize: 24,
            // 要求：标题的字体大小是 24px
            color: 'wheat',
          },
        },
        // x轴配置
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            color: 'black',
          },
           axisTick: {
            length: 6,
            inside: true,
            lineStyle: {
              color: 'red',
            },
          },
            axisLine:{
            lineStyle:{
              color:'skyblue'
            }
          },
          //  textStyle: {
          //   fontSize: 18,
          //   color: 'wheat',
          // },
        },
        // y轴配置
        yAxis: {
          type: 'value',
          axisLabel:{
            color: 'red',
          },
            splitLine: {
            // length: 6,
            inside: true,
            lineStyle: {
              color: 'block',
            },
          },

        },
        // 下面是构成图表的必须的配置，叫做系列数据
        series: [
          // 数组中的每一个小对象
          {
            // data 构成图表的数据
            data: [3820, 1932, 1901, 1934, 9290, 1330, 1320],
            // type图标的类型 (line-折线) ，(bar-折线) (pie-饼图) (map-地图)
            type: 'line',
            // smooth: true,
            name: '数量',
          },
          {
            data: [6620, 5562, 1901, 6634, 9290, 1330, 990],
            type: 'line',
            smooth: true,
            name: '单价',
          },
          {
            data: [8820, 7332, 7861, 1774, 1890, 1930, 1720],
            type: 'bar',
            barWidth: '40%', //控制柱子的宽度
            name: '总价',
          },
        ],
        // 颜色配置
        color: [
          'skyblue',
          'yellow',
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'greenyellow', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'pink', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        //  // 网格配置（坐标轴这个区域）
        grid: {
          top: 80,
        },
        // 图例(用于表达每个图形的意义)
        // 需要series中，每项数据必须定义name名
        legend: {
          top: 40,
        },
         //  提示框组件
      tooltip: {
        // 提示的触发方式
        // 默认是item，鼠标放到每一项上才会提示
        // 可选axis，鼠标放到轴上即可提示
        trigger: 'axis'
      }
      }
     
      // 3.根据配置项，创建图标(写法固定)
      chart.setOption(option)
    </script>
  </body>
</html>
